<template>
  <button
    :class="buttonComputedClass"
    :disabled="disable"
    @click="handleClick"
  >
    {{ text }}
  </button>
</template>
<script>
export default {
  name: 'Button',
  props: {
    text: { // 文案
      type: String,
      default: '确认'
    },
    type: { // 风格
      type: String,
      default: 'primary'
    },
    round: { // 圆角
      type: Boolean,
      default: false
    },
    inline: { // 行内
      type: Boolean,
      default: false
    },
    disable: { // 禁用
      type: Boolean,
      default: false
    }
  },
  computed: {
    buttonComputedClass () {
      let _class = `ak-button-ui ak-button-type-${this.type}`
      this.round && (_class += ' ak-button-round')
      this.inline && (_class += ' ak-button-inline')
      this.disable && (_class += ' ak-button-disable')
      return _class
    }
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt)
    }
  }
}
</script>
<style lang="less" scoped>
.ak-button-ui {
  color: #fff;
  font-size: 14px;
  border: none;
  outline: none;
  padding: 5px 12px;
  min-width: 50px;
  text-align: center;
  border-radius: 2px;
  display: block;

  // type
  &.ak-button-type-primary {
    background: #409EFF;
  }
  &.ak-button-type-success {
    background: #67C23A;
  }
  &.ak-button-type-warning {
    background: #E6A23C;
  }
  &.ak-button-type-danger {
    background: #F56C6C;
  }
  &.ak-button-type-info {
    background: #909399;
  }

  // round
  &.ak-button-round {
    border-radius: 15px;
  }

  // inline
  &.ak-button-inline {
    display: inline-block;
  }

  // disable
  &.ak-button-disable {
    opacity: 0.6;
  }
}
</style>
